<template>
  <div class="detail">
    <detail-banner :detailData="detailData" />
    <detail-header />
    <div class="content">
      <detail-list :ticketList="ticketList" />
    </div>
  </div>
</template>

<script>
import DetailBanner from './components/banner'
import DetailHeader from './components/header'
import DetailList from './components/list'
export default {
  name: 'detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  },
  data () {
    return {
      detailData: {},
      ticketList: [],
      lastId: 'idStart'
    }
  },
  methods: {
    getDetailData () {
      this.Axios.get('/api/detail.json?id=', {
        params: {
          id: this.$route.params.id
        }
      })
        .then(res => {
          res = res.data
          if (res.ret && res.data) {
            let data = res.data
            this.detailData = data
            this.ticketList = data.categoryList
          }
        })
    }
  },
  created () {
    this.getDetailData()
  },
  activated () {
    if (this.lastId !== 'idStart' && this.$route.params.id !== this.lastId) {
      this.getDetailData()
    }
    this.lastId = this.$route.params.id
  }
}
</script>

<style lang="stylus">
  .content
    height 50rem
</style>
